<!--
 * @Author: Aster lipian1004@163.com
 * @Date: 2023-10-17 14:53:30
 * @FilePath: \aster-flowable-uniapp\src\components\dict\dict-tag.vue
 * @Description: 字典标签
 * Copyright (c) 2024 by Aster, All Rights Reserved.
-->
<template>
  <view class="dict-tag">
    <template v-for="(item, index) in dataList">
      <template v-if="values.includes(item.dictValue)">
        <van-tag
          :key="item.dictValue"
          :index="index"
          :type="convertTagValue(item.labelClass)"
          :size="size"
        >
          {{ item.dictLabel }}
        </van-tag>
      </template>
    </template>
  </view>
</template>

<script setup lang="ts">
  import { computed, PropType, ref } from 'vue';
  import { useAppStore } from '@/store/modules/app';
  import { getDictDataList } from '@/utils';

  const appStore = useAppStore();

  const props = defineProps({
    dictType: {
      type: String,
      required: true,
    },
    value: [Number, String],
    size: {
      type: String as PropType<TagSize>,
      default: '',
    },
  });

  export type TagSize = 'large' | 'medium';
  export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';

  const tagValues = ref<TagType[]>(['primary', 'success', 'default', 'warning', 'danger']);

  /**
   * @description: 转换标签颜色
   * @param {string} value 颜色值
   * @return {string}
   */
  const convertTagValue = (labelClass: any) => {
    return tagValues.value.includes(labelClass) ? labelClass : 'default';
  };

  const values = computed(() => {
    if (props.value !== null && typeof props.value !== 'undefined') {
      return [String(props.value)];
    } else {
      return [];
    }
  });

  /**
   * @description: 获取字典数据
   * @return {*}
   */
  const dataList = getDictDataList(appStore.dictList, props.dictType);
</script>
<style lang="scss" scoped>
  .dict-tag {
    display: inline-block;
    padding: 0 3px;
  }
</style>
